<template>
	<view class="wrap">
		<u-navbar back-text="返回" title="" :border-bottom="false"></u-navbar>
		<view class="top"></view>
		<view class="content">
			<view class="title">欢迎{{type=='login'?'登录':'注册'}}三叶阅读</view>
			<view v-if="type=='register'">
				<u-field v-model="name" label="昵称" placeholder="请填写昵称" maxlength="10" :error-message="nameErrorMsg" @input="nameInput">
				</u-field>
				<u-field v-model="password" label="密码" placeholder="请填写密码" type="text" maxlength="18" password :error-message="passwordErrorMsg"
				 @input="passwordInput">
				</u-field>
				<u-field v-model="password_confirmation" label="确认密码" placeholder="请填写确认密码" type="text" maxlength="18" password
				 :error-message="password_confirmationErrorMsg" @input="password_confirmationInput">
				</u-field>
				<u-field v-model="email" label="邮箱" placeholder="请填写邮箱" maxlength="20" :error-message="emailErrorMsg" @input="emailInput">
				</u-field>
				<u-field v-model="code" label="验证码" placeholder="请输入验证码" type="text" maxlength="6" @input="codeInput">
					<u-button size="mini" slot="right" type="success" @click="getCode">{{tips}}</u-button>
				</u-field>
			</view>
			<view v-else>
				<u-field v-model="email" label="邮箱" placeholder="请填写邮箱" maxlength="20" :error-message="emailErrorMsg" @input="emailInput">
				</u-field>
				<u-field v-model="password" label="密码" placeholder="请填写密码" type="text" maxlength="18" password :error-message="passwordErrorMsg"
				 @input="passwordInput">
				</u-field>
			</view>

			<button @click="handleSubmit" :style="[inputStyle]" class="getCaptcha" :loading="buttonLoading" :disabled="buttonLoading">{{type=='login' ? '登录' : '注册'}}</button>
			<view class="alternative">
				<view class="password" @click='handleToChangeType'>{{ type=='login' ? '还没有账号?点击注册' : '已有账号?点击登录' }}</view>
				<view v-show="type=='login'" class="issue" @click="handleToRetrieve">忘记密码</view>
			</view>
		</view>
		<view v-if="type=='login'" class="buttom">
			<view class="loginType">
				<view class="wechat item">
					<view class="icon">
						<u-icon size="70" name="weixin-fill" color="rgb(83,194,64)"></u-icon>
					</view>
					微信
				</view>
				<view class="QQ item">
					<view class="icon">
						<u-icon size="70" name="qq-fill" color="rgb(17,183,233)"></u-icon>
					</view>
					QQ
				</view>
			</view>
			<view class="hint">
				登录代表同意
				<text class="link">三叶用户协议、隐私政策，</text>
				并授权使用您的账号信息.
			</view>
		</view>
		<u-verification-code :seconds="seconds" ref="uCode" @change="codeChange"></u-verification-code>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		login,
		register
	} from '../../api/user'
	import {
		sendMailCode,
		checkMailCode
	} from '../../api/common'
	export default {
		data() {
			return {
				type: 'login',
				name: '',
				email: '',
				password: '',
				password_confirmation: '',
				nameErrorMsg: '',
				emailErrorMsg: '',
				passwordErrorMsg: '',
				password_confirmationErrorMsg: '',
				buttonLoading: false,
				tips: '',
				seconds: 60,
				code: '',
				codeErrorMsg: ''
			}
		},
		computed: {
			inputStyle() {
				let style = {};
				if (this.email && this.password) {
					style.color = "#fff";
					style.backgroundColor = '#92c8ff';
				}
				return style;
			}
		},
		watch: {
			type() {
				this.name = '';
				this.email = '';
				this.password = '';
				this.password_confirmation = '';
				this.code = '';
				this.nameErrorMsg = false;
				this.emailErrorMsg = false;
				this.passwordErrorMsg = false;
				this.password_confirmationErrorMsg = false;
				this.codeErrorMsg = false;
			}
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			sendCode(email, type) {
				return new Promise((resolve, reject) => {
					sendMailCode({
						email,
						type
					}).then(res => {
						if (res.code == 200) {
							resolve('ok')
						} else {
							reject(res.msg)
						}
					})
				})
			},
			checkCode(email, code, type) {
				return new Promise((resolve, reject) => {
					checkMailCode({
						email,
						code,
						type
					}).then(res => {
						if (res.code == 200) {
							resolve(res.data.token)
						} else {
							reject(res.msg)
						}
					})
				})
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					if (this.email == '') {
						this.$refs.uToast.show({
							title: '请输入邮箱',
							type: 'error',
							position: 'top'
						})
						return
					}
					if (this.emailErrorMsg) {
						this.$refs.uToast.show({
							title: '邮箱格式有误',
							type: 'error',
							position: 'top'
						})
						return
					}
					uni.showLoading({
						title: '正在获取验证码'
					})
					this.sendCode(this.email, 1).then(res => {
						uni.hideLoading();
						if (res == 'ok') {
							this.$refs.uToast.show({
								title: '验证码已发送',
								type: 'success',
								position: 'top'
							})
							this.$refs.uCode.start();
						}
					}).catch(e => {
						this.$refs.uToast.show({
							title: e,
							type: 'error',
							position: 'top'
						})
					})
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			handleSubmit() {
				this.buttonLoading = true;
				if (this.type == 'login') { // 登录
					if (!this.email || !this.password) {
						this.$refs.uToast.show({
							title: '请填入完整的信息',
							type: 'error',
							position: 'top',
							callback: () => {
								this.buttonLoading = false;
							}
						});
						return;
					}
					if (this.emailErrorMsg || this.passwordErrorMsg) {
						this.$refs.uToast.show({
							title: '输入的信息格式有误',
							type: 'error',
							position: 'top',
							callback: () => {
								this.buttonLoading = false;
							}
						});
						return
					} else {
						console.log('login')
						this.handleLogin().then(res => {
							this.$refs.uToast.show({
								title: '登录成功',
								type: 'success',
								isTab: true,
								url: '/pages/user/user',
								position: 'top',
								duration:500,
								callback: () => {
									this.buttonLoading = false;
								}
							})
						}).catch(e => {
							this.buttonLoading = false;
						})
					}
				} else { // 注册
					if (!this.email || !this.password || !this.password_confirmation || !this.code || !this.name) {
						this.$refs.uToast.show({
							title: '请填入完整的信息',
							type: 'error',
							position: 'top',
							callback: () => {
								this.buttonLoading = false;
							}
						});
						return;
					}
					if (this.emailErrorMsg || this.passwordErrorMsg || this.nameErrorMsg || this.password_confirmationErrorMsg || this
						.codeErrorMsg) {
						this.$refs.uToast.show({
							title: '输入的信息格式有误',
							type: 'error',
							position: 'top',
							callback: () => {
								this.buttonLoading = false;
							}
						});
						return
					} else {
						if (this.password !== this.password_confirmation) {
							this.$refs.uToast.show({
								title: '两次输入的密码不一致',
								type: 'error',
								position: 'top',
								callback: () => {
									this.buttonLoading = false;
								}
							});
							return
						} else {
							console.log('register')
							this.handleRegister().then(res => {
								this.buttonLoading = false;
								this.$refs.uToast.show({
									title: '注册成功',
									type: 'success',
									isTab: true,
									url: '/pages/user/user',
									position: 'top'
								})
							}).catch(e => {
								this.$refs.uToast.show({
									title: e,
									type: 'error',
									callback: () => {
										this.buttonLoading = false;
									}
								})
							})
						}
					}
				}
			},
			handleLogin() {
				return new Promise((resolve, reject) => {
					login({
						'email': this.email,
						'password': this.password
					}).then(res => {
						this.$u.vuex('access_token', res.data.access_token);
						this.$u.vuex('user_info', res.data.userInfo);
						resolve('ok')
					}).catch(e => {
						reject(e)
					})
				})
			},
			handleRegister() {
				return new Promise((resolve, reject) => {
					register({
						'name': this.name,
						'email': this.email,
						'password': this.password,
						'password_confirmation': this.password_confirmation,
						'code': this.code
					}).then(res => {
						this.$u.vuex('access_token', res.data.access_token);
						this.$u.vuex('user_info', res.data.userInfo);
						resolve('ok')
					}).catch(e => {
						reject(e)
					})
				})
			},
			handleToChangeType: _.throttle(function() {
				if (this.type == 'login') {
					this.type = 'register'
				} else {
					this.type = 'login'
				}
			}, 1000),
			nameInput() {
				if (this.name == '') {
					this.nameErrorMsg = false;
					return;
				}
				if (!this.$u.test.rangeLength(this.name, [4, 10])) {
					this.nameErrorMsg = '昵称长度限制在4~10位内'
				} else {
					this.nameErrorMsg = false;
				}
			},
			emailInput() {
				if (this.email == '') {
					this.emailErrorMsg = false;
					return;
				}
				if (!this.$u.test.email(this.email)) {
					this.emailErrorMsg = '邮箱格式有误'
				} else {
					this.emailErrorMsg = false;
				}
			},
			passwordInput() {
				if (this.password == '') {
					this.passwordErrorMsg = false;
					return;
				}
				if (!this.$u.test.rangeLength(this.password, [6, 18])) {
					this.passwordErrorMsg = '密码长度限制在6~18位内'
				} else {
					this.passwordErrorMsg = false;
				}
			},
			password_confirmationInput() {
				if (this.password_confirmation == '') {
					this.password_confirmationErrorMsg = false;
					return;
				}
				if (!this.$u.test.rangeLength(this.password_confirmation, [6, 18])) {
					this.password_confirmationErrorMsg = '密码长度限制在6~18位内'
				} else {
					this.password_confirmationErrorMsg = false;
				}
			},
			codeInput() {
				if (this.code == '') {
					this.codeErrorMsg = false;
					return
				}
				if (this.$u.test.rangeLength(this.code, [6, 6]) && this.$u.test.number(parseInt(this.code))) {
					this.codeErrorMsg = false;
				} else {
					this.codeErrorMsg = '验证码必须为6位数字'
				}
			},
			handleToRetrieve() {
				uni.navigateTo({
					url: "/pages/user/retrieve"
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.wrap {
		font-size: 28rpx;

		.content {
			width: 600rpx;
			margin: 80rpx auto 0;

			.title {
				text-align: left;
				font-size: 60rpx;
				font-weight: 500;
				margin-bottom: 100rpx;
			}

			input {
				text-align: left;
				margin-bottom: 10rpx;
				padding-bottom: 6rpx;
			}

			.tips {
				color: $u-type-info;
				margin-bottom: 60rpx;
				margin-top: 8rpx;
			}

			.getCaptcha {
				background-color: rgba(146, 200, 255, .4);
				color: rgba(255, 255, 255, .8);
				border: none;
				font-size: 30rpx;
				padding: 12rpx 0;

				&::after {
					border: none;
				}
			}

			.alternative {
				color: $u-tips-color;
				display: flex;
				justify-content: space-between;
				margin-top: 30rpx;
			}
		}

		.buttom {
			.loginType {
				display: flex;
				padding: 200rpx 150rpx 150rpx 150rpx;
				justify-content: space-between;

				.item {
					display: flex;
					flex-direction: column;
					align-items: center;
					color: $u-content-color;
					font-size: 28rpx;
				}
			}

			.hint {
				padding: 20rpx 40rpx;
				font-size: 20rpx;
				color: $u-tips-color;

				.link {
					color: $u-type-warning;
				}
			}
		}
	}
</style>
